
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>油站签约申请</title>
		<meta http-equiv="Content-type" content="textml; charset=utf-8" />
		<meta content="telephone=no" name="format-detection" />
		<meta name="x5-orientation" content="portrait">
		<meta name="screen-orientation" content="portrait">
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=yes">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" type="text/css" href="//img.ejiayou.com/activity/pages/ejiayoupay/ejiayou/css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
		<!--  <link rel="stylesheet" type="text/css" href="css/index_style.css"/>-->
		<style type="text/css">
			html {
				font-size: 16px;
				background: #F7F8FA;
			}
			
			body {
				margin: 0;
				padding: 0;
			}
			
			.form {
				margin-top: 15px;
			}
			
			.btn-warp {
				display: flex;
				justify-content: space-between;
				margin: 30px 16px 0 16px;
			}
			
			.cancel-btn {
				width: 10.37rem;
				height: 3.12rem;
				font-size: 18px;
				font-weight: 600;
				color: #666666;
				background: #FFFFFF;
				border-radius: 6px;
				border: 1px solid #E9E9E9;
			}
			
			.submit-btn {
				width: 10.37rem;
				height: 3.12rem;
				font-size: 18px;
				font-weight: 600;
				color: #FFFFFF;
				background: linear-gradient(318deg, #FF9100 0%, #FFA400 100%);
				border-radius: 6px;
				border: none;
			}

		.contract-pictures {
			top: 0;
			left: 0;
			width: 5rem;
			height: 5rem;
		}

		.uploader_box {
			display: flex;
			justify-content: center;
			margin: auto;
			height: 6rem;
			background-color: #FFFFFF;
		}

		.uploadMsg {
			height: 1.25rem;
			font-size: 1.13rem;
			margin: 10px 0px 0px 0px;
			line-height: 1.25rem;
			text-align: center;
			background-color: #FFFFFF;
			color: #333333;
			font-family: PingFangSC-Regular, PingFang SC;
		}

		.take_pic_btn {
			width: 21.56rem;
			height: 3.13rem;
			font-size: 1.13rem;
			font-weight: 600;
			line-height: 3.13rem;
			border-radius: 0.38rem;
			text-align: center;
			margin: 20px 0px 0px 00px;
			font-family: PingFangSC-Semibold, PingFang SC;
			color: #FFFFFF;
			background: linear-gradient(318deg, #FF9100 0%, #FFA400 100%);
		}

		</style>
	</head>

	<body>
		<div id="app" v-cloak>
			<van-form class="form" label-width="4rem" @submit="onSubmit">
				<van-field v-model="form.station_name" label="油站名称" :error-message="stationNameErrorMessage"></van-field>
				<van-field v-model="form.sign_time" label="签约日期" readonly :rules="[{ required: true, message: '请选择签约日期' }]" @click="showDate = true"></van-field>
				<van-field name="uploader" v-model="form.contractPic" label="合同照片" :rules="[{validator, message: '请上传合同照片' }]">
					<template #input>
						<!-- <van-uploader v-model="contractPic" max-count="1" :after-read="uploadContract" /> -->
						<div class="contract-pictures" @click="selectPic">
							<van-image fit="cover" :src="form.contractPic">
								<template v-slot:loading>图片上传中</template>
							</van-image>
						</div>
					</template>
				</van-field>
				<div class="btn-warp">
					<button class="cancel-btn" @click.stop="onBack">取消</button>
					<button class="submit-btn" color="linear-gradient(to right, #FF9100, #FFA400)" native-type="submit">确认申请</button>
				</div>
			</van-form>
			<van-action-sheet v-model="showDate">
				<van-datetime-picker @cancel="showDate = false" @confirm="datetimeConfirm" type="date" :min-date="minDate" title="选择年月日" />
			</van-action-sheet>
		<!-- 拍摄示例层 -->
		<van-action-sheet v-model="showExamplePic" title="拍摄示例">
			<div>
				<van-swipe :autoplay="3000">
					<van-swipe-item v-for="(image, index) in images" :key="index">
						<van-image fit="contain" :src="image"></van-image>
					</van-swipe-item>
				</van-swipe>
			</div>
			<div class="uploadMsg">拍摄图片覆盖全部拍摄区域</div>
			<div class="uploader_box">
				<van-uploader :after-read="uploadContract" max-count="1">
					<div class="take_pic_btn">开始拍摄</div>
				</van-uploader>
			</div>
		</van-action-sheet>
		</div>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://img.ejiayou.com/activity/js/common/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vant.min.js"></script>
		<script src="js/utils.js" type="text/javascript" charset="utf-8"></script>
		<script src="//img.ejiayou.com/upload/2021/3/moment.min.js"></script>
		<script src="js/upload.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var admin_id = getQueryVariable('user_id') || ''
			new Vue({
				el: '#app',
				data: {
					form: {
						station_name: '',
						sign_time: '',
						contractPic: 'https://img.ejiayou.com/upload/2021/4/4d97491c-5c03-47f6-a427-4815480f02dc-1619435309258.png',
					},
					contractPic: [],
					showDate: false,
					minDate: new Date(2020, 0, 1),
					signStationList: [],
					hasSignStationName: false,
					stationNameErrorMessage: '',
					showExamplePic: false,
				    images: [
					'https://img.ejiayou.com/upload/2021/4/8dc96b30-0a06-4c1a-bea8-272e53c1e7d3-1619399688823.png'
				],
				isShowPic: false,
				},
				created() {},
				mounted() {

					if(getQueryVariable('isReader')) {
						this.isShowPic = true;
					} else {
						this.isShowPic = false;
					}

					this.form.sign_time = moment().format('YYYY-MM-DD')
				},
				methods: {
					onBack() {
						history.back();
					},
					validator(val) {
						console.log(val)
						var defaultPic = 'https://img.ejiayou.com/upload/2021/4/4d97491c-5c03-47f6-a427-4815480f02dc-1619435309258.png'
					if (val.length === 0 || val === defaultPic) {
						return false;
					} else {
						return true;
					}
						// return val.length === 0 ? false : true
					},
					// validator() {
					// 	return this.hasSignStationName;
					// },
					datetimeConfirm(val) {
						this.form.sign_time = moment(val).format('YYYY-MM-DD');
						this.showDate = false
					},
					selectPic() {
					this.showExamplePic = true;
				    },
					uploadContract(file) {
						var self = this
						this.showExamplePic = false;
						UpladFile(file.file, function(codes) {
							self.uploadImg(codes).then(res => {
								var resData = JSON.parse(res)
								self.form.contractPic = resData.data
							})
						})
					},
					uploadImg(file) {
						return new Promise((resolve, reject) => {
							$.ajax({
								type: 'POST',
								url: "/wxmp/view/uploadPic.ac",
								data: {
									imgData: file
								},
								success: (data) => {
									resolve(data)
								}
							})
						})
					},
					stationNameChange() {
						if(this.form.station_name) this.loadSignStation()
					},
					async onSubmit() {
						console.log(this.form);
						if(this.form.station_name) {
							await this.loadSignStation()
							const filterArr = this.signStationList.filter(item => item.station_name === this.form.station_name)
							if(filterArr.length !== 0) {
								// this.stationNameErrorMessage = '油站名称已存在'
								vant.Toast('油站名称重复');
								return
							} else {
								this.stationNameErrorMessage = ''
							}
						} else {
							this.stationNameErrorMessage = '请填写油站名称'
							return
						}
						$.ajax({
							url: '/eapi/v1/activity/work/form_save',
							type: 'POST',
							contentType: 'application/json; charset=utf-8',
							data: JSON.stringify({
								order_type_id: 7,
								title: this.form.station_name + '-油站签约申请',
								content: JSON.stringify(this.form),
								admin_id: admin_id,
								is_exchange: 1
							}),
							success: (res) => {
								vant.Dialog.confirm({
									title: '签约成功',
									confirmButtonText: '上线油站',
									cancelButtonText: '暂不上线',
									confirmButtonColor: '#FF9100',
									cancelButtonColor: '#666666',
									showCancelButton: true,
								}).then(() => {
									location.href = `${location.origin}/pages/aurora_project/base_station/index.html?admin_id=${admin_id}&station_name=${this.form.station_name}&sign_id=${res.data.work_order_id}`
								}).catch(() => {
									this.onBack()
								})
							}
						})
					},
					loadSignStation() {
						return new Promise((resolve, reject) => {
							$.ajax({
								// url: '/eapi/v1/activity/work/get_sign_station',
								url: '/eapi/v1/activity/work/get_station',
								type: 'POST',
								contentType: 'application/json; charset=utf-8',
								data: JSON.stringify({
									station_name: this.form.station_name
								}),
								success: (res) => {
									if(res.status === 200) {
										this.signStationList = res.data.list
										resolve()
									}
								},
								error() {
									reject()
								}
							})
						})
					}
				}
			})
		</script>
	</body>

</html>